<template>
  <el-card class="card-body">
    <SearchForm
      :moduleList="moduleList"
      @getTableData="getTableData"
      @handleSearch="handleSearch"
    />
    <el-divider style="margin: 0 0 22px 0" />
    <DataTables
      :tableData="tableData"
      :count="count"
      @handlePage="handlePage"
      @getTableData="getTableData"
    />
  </el-card>
</template>

<script>
import SearchForm from "./components/SearchForm";
import DataTables from "./components/DataTables";
import {
  getArticleApi,
  getArticleModuleListApi,
} from "@/api/modules/article.api";

export default {
  components: {
    SearchForm,
    DataTables,
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      moduleList: [],
      search: {},
    };
  },
  mounted() {
    this.getTableData(this.page);
    this.init();
  },
  methods: {
    async init() {
      this.moduleList = await getArticleModuleListApi();
    },
    async getTableData() {
      const obj = {
        ...this.page,
        ...this.search,
        status: (this.search.status = this.search.status
          ? this.search.status
          : 0),
      };
      const res = await getArticleApi(obj);
      this.tableData = res.records;
      this.count = res.total;
    },
    handleSearch(item) {
      this.search = item;
      this.getTableData();
    },
    handlePage(item) {
      this.page = item;
      this.getTableData();
    },
  },
};
</script>
